// 初始化应用程序
document.addEventListener('DOMContentLoaded', function() {
    console.log('天气卡片应用程序已加载');
    
    // 直接在页面中加载天气卡片，而不是使用fetch
    loadWeatherCardsInline();
    
    // 模拟获取天气数据（后续可以连接真实的天气API）
    getWeatherData()
        .then(data => {
            console.log('天气数据已获取:', data);
            updateWeatherCards(data);
        })
        .catch(error => {
            console.error('获取天气数据失败:', error);
        });
});

// 内联加载天气卡片HTML
function loadWeatherCardsInline() {
    // 现代风格卡片
    document.getElementById('modern-card-container').innerHTML = `
    <div class="modern-card">
        <div class="modern-card-header">
            <div class="modern-card-location">北京市</div>
            <div class="modern-card-date">星期五, 2月 27日</div>
        </div>
        <div class="modern-card-content">
            <div class="modern-card-temp">23<span>°C</span></div>
            <img src="images/weather-icons/sunny.svg" alt="晴天" class="modern-card-icon">
        </div>
        <div class="modern-card-description">晴天</div>
        <div class="modern-card-details">
            <div class="modern-card-details-item">
                <div class="modern-card-details-label">湿度</div>
                <div class="modern-card-details-value">45%</div>
            </div>
            <div class="modern-card-details-item">
                <div class="modern-card-details-label">风速</div>
                <div class="modern-card-details-value">5 km/h</div>
            </div>
            <div class="modern-card-details-item">
                <div class="modern-card-details-label">气压</div>
                <div class="modern-card-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;
    
    // 经典风格卡片 - 简单示例
    document.getElementById('classic-card-container').innerHTML = `
    <div class="classic-card">
        <h3>北京市</h3>
        <p>星期五, 2月 27日</p>
        <div class="classic-temp">23°C</div>
        <div class="classic-weather">晴天</div>
        <p>湿度: 45% | 风速: 5 km/h</p>
    </div>`;
    
    // 简约风格卡片 - 简单示例
    document.getElementById('minimal-card-container').innerHTML = `
    <div class="minimal-card">
        <div class="minimal-temp">23°</div>
        <div class="minimal-location">北京</div>
    </div>`;
    
    // 深色主题卡片 - 简单示例
    document.getElementById('dark-theme-card-container').innerHTML = `
    <div class="dark-card">
        <div class="dark-card-header">北京市</div>
        <div class="dark-card-temp">23°C</div>
        <div class="dark-card-weather">晴天</div>
    </div>`;
    
    // 孟菲斯风格卡片
    document.getElementById('memphis-card-container').innerHTML = `
    <div class="memphis-card">
        <div class="memphis-decoration"></div>
        <div class="memphis-decoration-2"></div>
        <div class="memphis-decoration-3"></div>
        <div class="memphis-content">
            <div class="memphis-location">北京市</div>
            <div class="memphis-date">星期五, 2月 27日</div>
            <div class="memphis-temp">23°C</div>
            <div class="memphis-weather">晴天</div>
            <div class="memphis-details">
                <div class="memphis-details-item">
                    <div class="memphis-details-label">湿度</div>
                    <div class="memphis-details-value">45%</div>
                </div>
                <div class="memphis-details-item">
                    <div class="memphis-details-label">风速</div>
                    <div class="memphis-details-value">5 km/h</div>
                </div>
                <div class="memphis-details-item">
                    <div class="memphis-details-label">气压</div>
                    <div class="memphis-details-value">1023 hPa</div>
                </div>
            </div>
        </div>
    </div>`;
    
    // 新波普艺术风格卡片
    document.getElementById('neopopart-card-container').innerHTML = `
    <div class="neopopart-card">
        <div class="neopopart-dots"></div>
        <div class="neopopart-bubble">热爆了!</div>
        <div class="neopopart-content">
            <div class="neopopart-header">
                <div class="neopopart-location">北京市</div>
                <div class="neopopart-date">星期五, 2月 27日</div>
            </div>
            <div class="neopopart-main">
                <div class="neopopart-temp">23°C</div>
                <div class="neopopart-icon-container">
                    <img src="images/weather-icons/sunny.svg" alt="晴天" width="50" height="50">
                </div>
            </div>
            <div class="neopopart-weather">晴天</div>
            <div class="neopopart-details">
                <div class="neopopart-details-item">
                    <div class="neopopart-details-label">湿度</div>
                    <div class="neopopart-details-value">45%</div>
                </div>
                <div class="neopopart-details-item">
                    <div class="neopopart-details-label">风速</div>
                    <div class="neopopart-details-value">5 km/h</div>
                </div>
                <div class="neopopart-details-item">
                    <div class="neopopart-details-label">气压</div>
                    <div class="neopopart-details-value">1023 hPa</div>
                </div>
            </div>
        </div>
    </div>`;
    
    // 布鲁塔利斯特风格卡片
    document.getElementById('brutalist-card-container').innerHTML = `
    <div class="brutalist-card">
        <div class="brutalist-header">
            <div class="brutalist-location">北京市</div>
            <div class="brutalist-date">2月 27日</div>
        </div>
        <div class="brutalist-content">
            <div class="brutalist-temp-container">
                <div class="brutalist-temp">23°C</div>
                <div class="brutalist-weather">晴天</div>
            </div>
            <div class="brutalist-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="brutalist-icon">
            </div>
            <div class="brutalist-details">
                <div class="brutalist-details-item">
                    <div class="brutalist-details-label">湿度</div>
                    <div class="brutalist-details-value">45%</div>
                </div>
                <div class="brutalist-details-item">
                    <div class="brutalist-details-label">风速</div>
                    <div class="brutalist-details-value">5 km/h</div>
                </div>
                <div class="brutalist-details-item">
                    <div class="brutalist-details-label">气压</div>
                    <div class="brutalist-details-value">1023 hPa</div>
                </div>
            </div>
        </div>
        <div class="brutalist-footer">天气数据 | 实时更新</div>
        <div class="brutalist-decoration"></div>
    </div>`;
    
    // 极限对比设计风格卡片
    document.getElementById('extreme-contrast-card-container').innerHTML = `
    <div class="extreme-contrast-card">
        <div class="extreme-contrast-header">
            <div class="extreme-contrast-location">北京市</div>
            <div class="extreme-contrast-date">2月 27日</div>
            <div class="extreme-contrast-diagonal"></div>
        </div>
        <div class="extreme-contrast-temp-section">
            <div class="extreme-contrast-temp">23°C</div>
            <div class="extreme-contrast-weather">晴天</div>
        </div>
        <div class="extreme-contrast-details">
            <div class="extreme-contrast-details-item">
                <div class="extreme-contrast-details-label">湿度</div>
                <div class="extreme-contrast-details-value">45%</div>
            </div>
            <div class="extreme-contrast-details-item">
                <div class="extreme-contrast-details-label">风速</div>
                <div class="extreme-contrast-details-value">5 km/h</div>
            </div>
            <div class="extreme-contrast-details-item">
                <div class="extreme-contrast-details-label">气压</div>
                <div class="extreme-contrast-details-value">1023 hPa</div>
            </div>
        </div>
        <div class="extreme-contrast-circle"></div>
    </div>`;
    
    // 赛博朋克风格卡片
    document.getElementById('cyberpunk-card-container').innerHTML = `
    <div class="cyberpunk-card">
        <div class="cyberpunk-grid"></div>
        <div class="cyberpunk-glitch"></div>
        <div class="cyberpunk-corner cyberpunk-corner-tl"></div>
        <div class="cyberpunk-corner cyberpunk-corner-tr"></div>
        <div class="cyberpunk-corner cyberpunk-corner-bl"></div>
        <div class="cyberpunk-corner cyberpunk-corner-br"></div>
        
        <div class="cyberpunk-header">
            <div class="cyberpunk-location">北京市</div>
            <div class="cyberpunk-date">2月 27日</div>
        </div>
        
        <div class="cyberpunk-content">
            <div class="cyberpunk-temp-container">
                <div class="cyberpunk-temp">23°C</div>
                <div class="cyberpunk-weather">晴天</div>
            </div>
            
            <div class="cyberpunk-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="cyberpunk-icon">
            </div>
            
            <div class="cyberpunk-details">
                <div class="cyberpunk-details-item">
                    <div class="cyberpunk-details-label">湿度</div>
                    <div class="cyberpunk-details-value">45%</div>
                </div>
                <div class="cyberpunk-details-item">
                    <div class="cyberpunk-details-label">风速</div>
                    <div class="cyberpunk-details-value">5 km/h</div>
                </div>
                <div class="cyberpunk-details-item">
                    <div class="cyberpunk-details-label">气压</div>
                    <div class="cyberpunk-details-value">1023 hPa</div>
                </div>
            </div>
        </div>
        
        <div class="cyberpunk-footer">SYSTEM.WEATHER.DATA.V2.0</div>
    </div>`;
    
    // 新拟态设计风格卡片
    document.getElementById('neumorphism-card-container').innerHTML = `
    <div class="neumorphism-card">
        <div class="neumorphism-button">
            <div class="neumorphism-button-dot"></div>
            <div class="neumorphism-button-dot"></div>
            <div class="neumorphism-button-dot"></div>
        </div>
        
        <div class="neumorphism-header">
            <div class="neumorphism-location">北京市</div>
            <div class="neumorphism-date">2月 27日</div>
        </div>
        
        <div class="neumorphism-content">
            <div class="neumorphism-temp-container">
                <div class="neumorphism-temp">23°C</div>
                <div class="neumorphism-weather">晴天</div>
            </div>
            
            <div class="neumorphism-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="neumorphism-icon">
            </div>
        </div>
        
        <div class="neumorphism-details">
            <div class="neumorphism-details-item">
                <div class="neumorphism-details-label">湿度</div>
                <div class="neumorphism-details-value">45%</div>
            </div>
            <div class="neumorphism-details-item">
                <div class="neumorphism-details-label">风速</div>
                <div class="neumorphism-details-value">5 km/h</div>
            </div>
            <div class="neumorphism-details-item">
                <div class="neumorphism-details-label">气压</div>
                <div class="neumorphism-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;
    
    // 现代高级设计风格卡片
    document.getElementById('premium-modern-card-container').innerHTML = `
    <div class="premium-modern-card">
        <div class="premium-modern-accent"></div>
        <div class="premium-modern-accent-2"></div>
        
        <div class="premium-modern-header">
            <div class="premium-modern-location">北京市</div>
            <div class="premium-modern-date">2月 27日</div>
        </div>
        
        <div class="premium-modern-content">
            <div class="premium-modern-temp-container">
                <div class="premium-modern-temp">23°C</div>
                <div class="premium-modern-weather">晴天</div>
            </div>
            
            <div class="premium-modern-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="premium-modern-icon">
            </div>
        </div>
        
        <div class="premium-modern-details">
            <div class="premium-modern-details-item">
                <div class="premium-modern-details-label">湿度</div>
                <div class="premium-modern-details-value">45%</div>
            </div>
            <div class="premium-modern-details-item">
                <div class="premium-modern-details-label">风速</div>
                <div class="premium-modern-details-value">5 km/h</div>
            </div>
            <div class="premium-modern-details-item">
                <div class="premium-modern-details-label">气压</div>
                <div class="premium-modern-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;
    
    // 暗黑模式设计风格卡片
    document.getElementById('dark-mode-card-container').innerHTML = `
    <div class="dark-mode-card">
        <div class="dark-mode-glow"></div>
        <div class="dark-mode-glow-2"></div>
        
        <div class="dark-mode-header">
            <div class="dark-mode-location">北京市</div>
            <div class="dark-mode-date">2月 27日</div>
        </div>
        
        <div class="dark-mode-content">
            <div class="dark-mode-temp-container">
                <div class="dark-mode-temp">23°C</div>
                <div class="dark-mode-weather">晴天</div>
            </div>
            
            <div class="dark-mode-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="dark-mode-icon">
            </div>
        </div>
        
        <div class="dark-mode-details">
            <div class="dark-mode-details-item">
                <div class="dark-mode-details-label">湿度</div>
                <div class="dark-mode-details-value">45%</div>
            </div>
            <div class="dark-mode-details-item">
                <div class="dark-mode-details-label">风速</div>
                <div class="dark-mode-details-value">5 km/h</div>
            </div>
            <div class="dark-mode-details-item">
                <div class="dark-mode-details-label">气压</div>
                <div class="dark-mode-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;
    
    // 中国传统风格卡片
    document.getElementById('chinese-traditional-card-container').innerHTML = `
    <div class="chinese-traditional-card">
        <div class="chinese-traditional-stamp">天气</div>
        <div class="chinese-traditional-knot"></div>
        
        <div class="chinese-traditional-header">
            <div class="chinese-traditional-location">北京市</div>
            <div class="chinese-traditional-date">2月 27日</div>
        </div>
        
        <div class="chinese-traditional-content">
            <div class="chinese-traditional-temp-container">
                <div class="chinese-traditional-temp">23°C</div>
                <div class="chinese-traditional-weather">晴天</div>
            </div>
            
            <div class="chinese-traditional-icon-container">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="chinese-traditional-icon">
            </div>
        </div>
        
        <div class="chinese-traditional-details">
            <div class="chinese-traditional-details-item">
                <div class="chinese-traditional-details-label">湿度</div>
                <div class="chinese-traditional-details-value">45%</div>
            </div>
            <div class="chinese-traditional-details-item">
                <div class="chinese-traditional-details-label">风速</div>
                <div class="chinese-traditional-details-value">5 km/h</div>
            </div>
            <div class="chinese-traditional-details-item">
                <div class="chinese-traditional-details-label">气压</div>
                <div class="chinese-traditional-details-value">1023 hPa</div>
            </div>
        </div>
        
        <div class="chinese-traditional-footer">天气预报 • 仅供参考</div>
    </div>`;
    
    // 手绘风格卡片
    document.getElementById('hand-drawn-card-container').innerHTML = `
    <div class="hand-drawn-card">
        <svg width="0" height="0">
            <filter id="hand-drawn-filter">
                <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" result="noise"/>
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G"/>
            </filter>
        </svg>
        <div class="hand-drawn-card-header">
            <div class="hand-drawn-card-location">北京市</div>
            <div class="hand-drawn-card-date">星期五, 2月 27日</div>
        </div>
        <div class="hand-drawn-card-content">
            <div class="hand-drawn-card-temp">23<span>°C</span></div>
            <img src="images/weather-icons/sunny.svg" alt="晴天" class="hand-drawn-card-icon">
        </div>
        <div class="hand-drawn-card-description">晴天</div>
        <div class="hand-drawn-card-details">
            <div class="hand-drawn-card-details-item">
                <div class="hand-drawn-card-details-label">湿度</div>
                <div class="hand-drawn-card-details-value">45%</div>
            </div>
            <div class="hand-drawn-card-details-item">
                <div class="hand-drawn-card-details-label">风速</div>
                <div class="hand-drawn-card-details-value">5 km/h</div>
            </div>
            <div class="hand-drawn-card-details-item">
                <div class="hand-drawn-card-details-label">气压</div>
                <div class="hand-drawn-card-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;

    // 视觉动效风格卡片
    document.getElementById('visual-motion-card-container').innerHTML = `
    <div class="visual-motion-card">
        <div class="visual-motion-background">
            <div class="visual-motion-particles"></div>
            <div class="visual-motion-gradient"></div>
        </div>
        <div class="visual-motion-card-header">
            <div class="visual-motion-card-location">北京市</div>
            <div class="visual-motion-card-date">星期五, 2月 27日</div>
        </div>
        <div class="visual-motion-card-content">
            <div class="visual-motion-card-temp">23<span>°C</span></div>
            <div class="visual-motion-card-icon-wrapper">
                <img src="images/weather-icons/sunny.svg" alt="晴天" class="visual-motion-card-icon">
                <div class="visual-motion-card-icon-glow"></div>
            </div>
        </div>
        <div class="visual-motion-card-description">晴天</div>
        <div class="visual-motion-card-details">
            <div class="visual-motion-card-details-item">
                <div class="visual-motion-card-details-icon humidity-icon"></div>
                <div class="visual-motion-card-details-label">湿度</div>
                <div class="visual-motion-card-details-value">45%</div>
            </div>
            <div class="visual-motion-card-details-item">
                <div class="visual-motion-card-details-icon wind-icon"></div>
                <div class="visual-motion-card-details-label">风速</div>
                <div class="visual-motion-card-details-value">5 km/h</div>
            </div>
            <div class="visual-motion-card-details-item">
                <div class="visual-motion-card-details-icon pressure-icon"></div>
                <div class="visual-motion-card-details-label">气压</div>
                <div class="visual-motion-card-details-value">1023 hPa</div>
            </div>
        </div>
    </div>`;

    // 表现主义风格卡片
    document.getElementById('expressionism-card-container').innerHTML = `
    <div class="expressionism-card">
        <div class="expressionism-background">
            <div class="expressionism-stroke stroke-1"></div>
            <div class="expressionism-stroke stroke-2"></div>
            <div class="expressionism-stroke stroke-3"></div>
            <div class="expressionism-stroke stroke-4"></div>
        </div>
        <div class="expressionism-content">
            <div class="expressionism-header">
                <div class="expressionism-card-location">北京市</div>
                <div class="expressionism-card-date">星期五, 2月 27日</div>
            </div>
            <div class="expressionism-main">
                <div class="expressionism-temp-container">
                    <div class="expressionism-card-temp">23<span>°C</span></div>
                    <div class="expressionism-card-description">晴天</div>
                </div>
                <div class="expressionism-icon-container">
                    <div class="expressionism-icon-frame">
                        <img src="images/weather-icons/sunny.svg" alt="晴天" class="expressionism-card-icon">
                    </div>
                </div>
            </div>
            <div class="expressionism-details">
                <div class="expressionism-card-details-item">
                    <div class="expressionism-card-details-label">湿度</div>
                    <div class="expressionism-card-details-value">45%</div>
                </div>
                <div class="expressionism-card-details-item">
                    <div class="expressionism-card-details-label">风速</div>
                    <div class="expressionism-card-details-value">5 km/h</div>
                </div>
                <div class="expressionism-card-details-item">
                    <div class="expressionism-card-details-label">气压</div>
                    <div class="expressionism-card-details-value">1023 hPa</div>
                </div>
            </div>
        </div>
    </div>`;
}

// 原来的loadWeatherCard函数保留，但不再使用
function loadWeatherCard(containerId, templatePath) {
    const container = document.getElementById(containerId);
    
    // 注释掉fetch调用，改用内联HTML
    /*
    fetch(templatePath)
        .then(response => response.text())
        .then(html => {
            container.innerHTML = html;
        })
        .catch(error => {
            console.error(`加载模板 ${templatePath} 失败:`, error);
            container.innerHTML = `<div class="error-message">加载天气卡片失败</div>`;
        });
    */
}
